<template>
  <div
    class="test-procedure-container animate__faster animate__animated animate__fadeIn"
  >
    <div
      class="test-procedure-body animate__faster animate__animated animate__fadeIn"
      v-loading="loading"
    >
      <div class="zhgd-data-report-header" header="试验规程">
        <a-button type="primary" class="solid-link" @click="upload()">
          上传
        </a-button>
      </div>
      <div class="table-warp-body">
        <div class="table-body">
          <vxe-table
            height="99%"
            class="scrollbarStyle"
            align="center"
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              field="standardName"
              title="规范名称"
              min-width="200"
            ></vxe-column>
            <vxe-column
              field="createName"
              title="上传人"
              min-width="200"
            ></vxe-column>
            <vxe-column
              field="createTime"
              title="上传时间"
              min-width="200"
            ></vxe-column>
            <vxe-column field="operate" width="200" title="操作" fixed="right">
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button type="link" @click="goDetail(row, '1')"
                    >查看</a-button
                  >
                  <a-button type="link" @click="goDetail(row, '2')"
                    >编辑</a-button
                  >
                  <a-button
                    type="link"
                    class="danger"
                    @click="handleDelClick(row)"
                    >删除</a-button
                  >
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <addModel
      :visible.sync="modalVisible"
      :modelType="modelType"
      :modelTitle="modelTitle"
      :id="id"
      :zhgdDeptCode="conditionsData.block"
    ></addModel>
  </div>
</template>

<script>
import addModel from "./components/addModel";
import { notificationTip } from "@/utils";
import { getProcedureList, deleteTest } from "@/api/wisdom-beam/trial-app";
export default {
  components: {
    addModel,
  },
  data() {
    return {
      loading: false,
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
        },
      ],
      conditionsData: {},
      addBtn: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      modalVisible: false,
      modelType: "",
      modelTitle: "",
      id: "",
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    //删除
    handleDelClick(row) {
      let that = this;
      let { id } = row;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          return new Promise((resolve, reject) => {
            deleteTest(id)
              .then((res) => {
                notificationTip("success", "删除成功!");
                that.getTableData();
                resolve();
              })
              .catch((_) => {
                reject();
                notificationTip("error", "删除失败!");
              });
          });
        },
        onCancel() {},
      });
    },
    // 上传
    upload() {
      this.modalVisible = true;
      this.modelType = true;
      this.id = "";
      this.modelTitle = "上传";
    },
    goDetail(record, i) {
      switch (i) {
        case "1":
          this.modalVisible = true;
          this.modelType = false;
          this.modelTitle = "详情";
          this.id = record.id;
          break;

        case "2":
          this.modalVisible = true;
          this.modelType = true;
          this.modelTitle = "编辑";
          this.id = record.id;
          break;
        default:
          break;
      }
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    getTableData() {
      let { page, pageSize } = this.pager;
      getProcedureList({
        page,
        pageSize,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.tableData = result.records || [];
          this.pager.total = result.total;
        })
        .catch((_) => {
          this.tableData = [];
        });
    },
  },
};
</script>

<style lang="less" scoped>
.test-procedure-container {
  height: 100%;
  padding: 0 0 10px 10px;
  .flex();
  flex-direction: column;
  .test-procedure-body {
    flex: 1;
    background: #fff;
    overflow: hidden;
    margin: 10px 10px 0 0;
    .flex();
    flex-direction: column;
    .zhgd-data-report-header {
      padding: 22px 27px 22px 20px;
    }
    .table-warp-body {
      flex: 1;
      .flex();
      flex-direction: column;
      .table-body {
        flex: 1;
      }
    }
  }
}
</style>
